<!DOCTYPE html>
    <head profile="http://dublincore.org/documents/dcq-html/">
    	
        <title>Example with Google maps and microdata - Google maps jQuery plugin</title>
        <meta name="keywords" content="Google maps, jQuery, plugin, microdata" />
		<meta name="description" content="An example how to load markers with microdata using jQuery and Google maps v3" />
		<meta http-equiv="content-language" content="en" />
		
		<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
		<meta name="DC.title" content="Example with Google maps and microdata - Google maps jQuery plugin" />
		<meta name="DC.subject" content="Google maps;jQuery;plugin;microdata" />
		<meta name="DC.description" content="An example how to load markers with microdata using jQuery and Google maps v3" />
		<meta name="DC.creator" content="Johan S&auml;ll Larsson" />
        <meta name="DC.language" content="en" />
		
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
		
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css" />
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" />	 
        <link rel="stylesheet" type="text/css" href="../thirdparty/SyntaxHighlighter/shCore.css" />
		<link rel="stylesheet" type="text/css" href="../thirdparty/SyntaxHighlighter/shThemeDefault.css" />		
		<link rel="stylesheet" type="text/css" href="css/main.css" />
        
        <script src="http://www.google.com/jsapi?key=ABQIAAAAahcO7noe62FuOIQacCQQ7RTHkUDJMJAZieEeKAqNDtpKxMhoFxQsdtJdv3FJ1dT3WugUNJb7xD-jsQ" type="text/javascript"></script>        
        <script type="text/javascript">
			google.load("maps", "3", {'other_params':'sensor=true'});
			google.load("jquery", "1.5");
			google.load("jqueryui", "1.8.9");
		</script>
        
		<script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
        <script type="text/javascript" src="../ui/jquery.ui.gmap.microdata.js"></script>
		<script src="../thirdparty/SyntaxHighlighter/shCore.js" type="text/javascript"></script>
      	<script src="../thirdparty/SyntaxHighlighter/shAutoloader.js" type="text/javascript"></script>
		<script src="../thirdparty/SyntaxHighlighter/shBrushJScript.js" type="text/javascript"></script>
		<script src="../thirdparty/SyntaxHighlighter/shBrushXml.js" type="text/javascript"></script>
        <script type="text/javascript">
		//<![CDATA[
			$(function() {
				// Only for code formatting
				SyntaxHighlighter.all();
				
				$('#map_canvas').gmap({ 'callback': function () {
						$('#map_canvas').gmap('loadMetadata', 'microdata', 'http://data-vocabulary.org/Event', function(index, item, result) {
							var latlng = new google.maps.LatLng(result.properties.location[0].properties.geo[0].properties.latitude[0], result.properties.location[0].properties.geo[0].properties.longitude[0]);
							$('#map_canvas').gmap('addMarker', { 'bounds':true, 'position': latlng, 'animation': google.maps.Animation.DROP }, function(map, marker){
								var content = '<div class="iw"><img class="iw-photo shadow-all" src="'+result.properties.photo[0]+'"/><h1 class="iw-summary">'+result.properties.summary[0]+'</h1><p class="iw-description">'+result.properties.description[0]+'</p><div class="clear"><div></div>';
								var iw = $('#map_canvas').gmap('addInfoWindow', { 'position':marker.getPosition(), 'content': content }, function(iw) {
									$(marker).click(function() {
										iw.open(map, marker);
										map.panTo(marker.getPosition());
									});																												  
								});
								$(item).addClass('clickable');
								$(item).click(function() {
									$(marker).triggerEvent('click');
									return false;
								});
							});																	 
						});
					}
				});
            });
		//]]>
		</script>
		<style type="text/css">
			
			a, a:active, a:hover, a:focus { color: #008595; text-decoration: none; outline: none; }
			.hidden { display:none; }
			
			.vevent { padding: 1em; margin: 0 0 2em 5em; border: 1px solid #f5f5f5; overflow: auto; }
			.vevent .photo { margin: -4em 1em 0 -6em; position: absolute; float:left; width:100px; border: 7px solid #fafafa; }
			.iw { background:#eee; padding:1em; overflow:auto; }
			.iw-photo { float:left; border: 7px solid #fafafa; margin: 0 1em 0 0; }
			.vevent .summary, .iw-summary { margin: 0 0 0.5em 3em; }
			.vevent .summary a { color: #2a3333; }
			.vevent .description, .iw-description { display:block; margin:0 0 1em 4em; }
			.vevent .bold { font-weight:bold; }
			.clickable { cursor:pointer; }
			
		</style>
    </head>
    <body>
        
        <div id="doc">
		
            <div id="hd">
                <h1><a href="/">Google maps jQuery plugin</a> load markers with microdata example</h1>
            </div>
            
            <div class="item gradient ui-corner-all shadow-all">
                <div id="map_canvas"></div>
            </div>
            
            <div id="control">
                <div class="vevent gradient ui-corner-all shadow-all" itemscope itemtype="http://data-vocabulary.org/Event">
                    <h2 class="summary" itemprop="summary"><a href="http://www.infected-mushroom.com" itemprop="url">Infected Mushroom</a></h2>
                    <img class="photo shadow-all" itemprop="photo" src="images/Infected_Mushroom_IM_The_Supervisor.jpg" />
                    <span class="description" itemprop="description">Psy-Trance innovators Infected Mushroom have become one of the biggest electronic bands on the planet. Twice ranked among the world’s 10 best DJs by the bible of the scene, the U.K.’s DJ Magazine, the Israel-bred, L.A. based duo bring a frenetic rock energy to the form. Their explosive show, featuring guitars, live drums, intensely passionate vocals and an ambitious multimedia backdrop, ranks among the genre’s most unpredictably joyous events. And their recordings continually venture where other electronic acts fear to tread. </span>
                    <span class="bold">When:</span>
                    <time itemprop="startDate" datetime="2011-03-19T15:00-00:00">Mar 19, 3:00PM</time> —
                    <time itemprop="endDate" datetime="2011-06-05T00:00-02:00">Mar 19, 2:00AM</time>
                    <span class="bold">Where:</span>
                    <span class="location vcard" itemprop="location" itemscope itemtype="http://data-vocabulary.org/?Organization">
                        <span itemprop="name">Beyond Wonderland</span>
                        <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
                            <span itemprop="street-address">689 S E St</span>, 
                            <span itemprop="locality">San Bernardino</span>, 
                            <span itemprop="region">CA</span>
                        </span>
                        <span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/?Geo">
                            <meta itemprop="latitude" content="34.089696"/>
                            <meta itemprop="longitude" content="-117.291653"/>
                        </span>
                    </span>
                    <span class="hidden" itemprop="eventType">Concert</span>
                    Event website: http://www.beyond-wonderland.com/
                    Buy tickets at http://www.beyondwonderland.com/SOCAL/tickets.php
                    <div class="clear"></div> 
                </div>
                
                <div class="vevent gradient ui-corner-all shadow-all" itemscope itemtype="http://data-vocabulary.org/Event">
                    <h2 class="summary" itemprop="summary"><a href="http://www.infected-mushroom.com" itemprop="url">Infected Mushroom</a></h2>
                    <img class="photo shadow-all" itemprop="photo" src="images/infected-mushroom-the-gathering-1999.jpg" />
                    <span class="description" itemprop="description">Starscape 2011 is the thirteenth annual Starscape Festival, and will be held on Saturday June 4, 2011 at Fort Armistead Park in Baltimore, MD. The event features five stages of music and entertainment, mixing live acts, djs, and visual performances. The event begins at 2 p.m. on Saturday afternoon, and runs continuously through until 6 a.m. on Sunday morning, culminating in the sunrise over the Chesapeake Bay. </span>
                    <span class="bold">When:</span>
                    <time itemprop="startDate" datetime="2011-06-04T14:00-00:00">June 4, 2:00PM</time> —
                    <time itemprop="endDate" datetime="2011-06-05T00:00-06:00">June 5, 6:00AM</time>
                    <span class="bold">Where:</span>
                    <span class="location vcard" itemprop="location" itemscope itemtype="http://data-vocabulary.org/?Organization">
                        <span itemprop="name">Starscape Festival</span>
                        <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
                            <span itemprop="street-address">Fort Armistead Park</span>, 
                            <span itemprop="locality">Baltimore</span>, 
                            <span itemprop="region">MD</span>
                        </span>
                        <span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/?Geo">
                            <meta itemprop="latitude" content="39.2083424"/>
                            <meta itemprop="longitude" content="-76.53943019999997"/>
                        </span>
                    </span>
                    <span class="hidden" itemprop="eventType">Concert</span>
                    Event website: http://www.starscapefestival.com/
                    Buy tickets at http://www.starscapefestival.com/
                    <div class="clear"></div> 
                </div>
            </div>
        
            <article>
                <h2>Using jquery with Google maps</h2>
                <p>
                    Download <a href="http://jquery.com/">jQuery 1.4.X or higher</a> and <a href="http://jqueryui.com/">jQuery UI 1.8.X or higher</a> or
                    use <a href="http://code.google.com/intl/sv-SE/apis/libraries/devguide.html">Googles</a> or <a href="http://www.asp.net/ajaxlibrary/cdn.ashx">Microsofts</a> 
                    <abbr title="Content delivery network"><a href="http://en.wikipedia.org/wiki/Content_delivery_network">CDN</a></abbr>.
                </p>
                
                <div class="prettyprint">
                    <pre class="brush: xml">
&lt;script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="PATH_TO_PLUGIN/jquery.ui.map.js" type="text/javascript"&gt;&lt;/script&gt;</pre>
                </div>
            
                <div class="prettyprint">
                    <pre class="brush: js">
&lt;script type="text/javascript"&gt;
	$(function() {
		$('#map_canvas').gmap({ 'center': new google.maps.LatLng(39.2083424, -76.53943019999997), 'navigationControl': false, 'streetViewControl': false, 'callback': function () {
                $('#map_canvas').gmap('loadMetadata', 'microdata', 'http://data-vocabulary.org/Event', function(i, item, result) {
                    var latlng = new google.maps.LatLng(result.properties.location[0].properties.geo[0].properties.latitude[0], result.properties.location[0].properties.geo[0].properties.longitude[0]);
                    $('#map_canvas').gmap('addMarker', { 'bounds':true, 'position': latlng, 'animation': google.maps.Animation.DROP }, function(map, marker){
                        var content = '&lt;div class="iw"&gt;&lt;img class="iw-photo shadow-all" src="'+result.properties.photo[0]+'"/&gt;&lt;h1 class="iw-summary"&gt;'+result.properties.summary[0]+'&lt;/h1&gt;&lt;p class="iw-description"&gt;'+result.properties.description[0]+'&lt;/p&gt;&lt;div class="clear"&gt;&lt;div&gt;&lt;/div&gt;';
                        var iw = $('#map_canvas').gmap('addInfoWindow', { 'position':marker.getPosition(), 'content': content }, function(iw) {
                            $(marker).click(function() {
                                iw.open(map, marker);
                                map.panTo(marker.getPosition());
                            });																												  
                        });
                        $(item).addClass('clickable');
                        $(item).click(function() {
                            $(marker).triggerEvent('click');
                            return false;
                        });
                    });																	 
                });
            }
        });
	});
&lt;/script&gt;</pre>
                </div>
                
                <h2>More Google maps and jQuery examples</h2>
                <ul>
                    <li><a href="jquery-mobile-example.html">Google maps with jQuery mobile example</a></li>
                    <li><a href="advanced-example.html">Microformats, Google streetview and jQuery dialog example</a></li>
                    <li><a href="other-examples.html">Click and drag events with Google geo search example</a></li>
                    <li><a href="load JSON example.html">Import markers with JSON example</a></li>
                    <li><a href="load Microformat example.html">Import markers with microformats example</a></li>
                    <li><a href="load RDFa example.html">Import markers with RDFa example</a></li>
                    <li><a href="load Fusion.html">Import markers with Google Fusion tables</a></li>
                    <li><a href="multiple maps example.html">Multiple maps on a single page example</a></li>
                    <li><a href="basic-example.html">Google maps and jQuery example</a></li>
					<li><a href="google-maps-jquery-filtering.html">Filter markers example</a></li>
                </ul>
                
            </article>
            
            <div id="ft">
                <div class="ctr" itemscope itemtype="http://data-vocabulary.org/Person">
                    Author: 
                    <span itemprop="name">Johan S&auml;ll Larsson</span>  
                    <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
                        <span itemprop="locality">G&ouml;teborg</span>, 
                        <span itemprop="country-name">Sweden</span> 
                    </span>
                </div>
            </div>
            
        </div>
        
		<script type="text/javascript">
			var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
			document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
		</script>
		<script type="text/javascript">
			try {
				var pageTracker = _gat._getTracker("UA-17614686-3");
				pageTracker._trackPageview();
			} catch(err) {}
		</script>
        
    </body>
    
</html>